/*
 * @Author: duchengdong
 * @Date: 2024-03-11 23:21:25
 * @LastEditors: duchengdong
 * @LastEditTime: 2024-03-13 23:25:23
 * @Description:
 */
import {View, Text, ScrollView, Dimensions} from 'react-native'
import React, {useState, useEffect, useRef} from 'react'
import {StyleSheet} from 'react-native'
import {formatDateTime} from '../../utils'
import {infoColor, successColor, warningColor, errorColor} from '../../global'
import {ButtonGroup} from '@rneui/themed'
// import {LineChart} from 'react-native-gifted-charts'
import * as echarts from 'echarts/core'
import {LineChart} from 'echarts/charts'
import {
	TitleComponent,
	TooltipComponent,
	GridComponent,
	DatasetComponent,
	TransformComponent,
	LegendComponent,
	VisualMapComponent,
	ToolboxComponent,
	DataZoomComponent,
	GraphicComponent,
	PolarComponent,
	TimelineComponent,
	BrushComponent,
	MarkLineComponent,
	MarkAreaComponent,
	MarkPointComponent,
	SingleAxisComponent,
	ParallelComponent,
	CalendarComponent,
	GeoComponent,
} from 'echarts/components'
import {SVGRenderer, SvgChart} from '@wuba/react-native-echarts'

echarts.use([
	SVGRenderer,
	LineChart,
	TitleComponent,
	TooltipComponent,
	GridComponent,
	DatasetComponent,
	TransformComponent,
	LegendComponent,
	VisualMapComponent,
	ToolboxComponent,
	DataZoomComponent,
	GraphicComponent,
	PolarComponent,
	TimelineComponent,
	BrushComponent,
	MarkLineComponent,
	MarkAreaComponent,
	MarkPointComponent,
	SingleAxisComponent,
	ParallelComponent,
	CalendarComponent,
	GeoComponent,
])

const style = StyleSheet.create({
	container: {
		padding: 10,
		height: '100%',
		backgroundColor: '#fff',
	},
	dateTime: {
		color: infoColor,
		marginBottom: 12,
		fontSize: 20,
	},
})

const E_HEIGHT = 400
const E_WIDTH = Dimensions.get('screen').width

function calcTime(len = 10) {
	let now = new Date()
	let res = []
	while (len--) {
		res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
		now = new Date(+now - 5000)
	}
	return res
}

function calcValue(len = 10) {
	let res = []
	while (len--) {
		res.push((Math.random() * 8).toFixed(1) * 1 + 1)
	}
	return res
}

export default function Detail() {
	const [selectedIndex, setSelectedIndex] = useState(0)
	const svgRef = useRef(null)
	const [chart, setChart] = useState(null)
	useEffect(() => {
		const option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '5%',
        right: '15%',
        bottom: '10%'
      },
      xAxis: {
        data: calcTime(60)
      },
      yAxis: {},
      dataZoom: [
        {
          startValue: '2024-01-01'
        },
        {
          type: 'inside'
        }
      ],
      visualMap: {
        top: 50,
        right: 10,
        pieces: [
          {
            gt: 0,
            lte: 4,
            color: '#FC7D02'
          },
          {
            gt: 4,
            lte: 8,
            color: '#93CE07'
          },
          {
            gt: 8,
            color: '#AC3B2A'
          }
        ],
        outOfRange: {
          color: '#999'
        }
      },
      series: {
        name: '光强',
        type: 'line',
        data: calcValue(60),
        symbol: 'none',
        markLine: {
          silent: true,
          lineStyle: {
            color: '#333'
          },
          data: [
            {
              yAxis: 4
            },
            {
              yAxis: 8
            }
          ]
        }
      }
    }
		let chart
		if (svgRef.current) {
			chart = echarts.init(svgRef.current, 'light', {
				renderer: 'svg',
				width: E_WIDTH,
				height: E_HEIGHT,
			})
			chart.setOption(option)
		}
		setChart(chart)
		return () => chart?.dispose()
	}, [])

	const changeType = type => {
		if (type == selectedIndex) return
		setSelectedIndex(type)
		let categories = []
		let data = []
		if (type == 0) {
			categories = calcTime(60)
			data = calcValue(60)
		}
		if (type == 1) {
			categories = calcTime(120)
			data = calcValue(120)
		}
		if (type == 2) {
			categories = calcTime(180)
			data = calcValue(180)
		}
		chart.setOption({
			xAxis: [{data: categories}],
			series: [{data: data}],
		})
	}

	return (
		<ScrollView style={style.container}>
			<View style={{marginBottom: 20}}>
				<View>
					<Text style={style.dateTime}>{formatDateTime()}</Text>
				</View>
				<View>
					<Text style={{fontSize: 18, color: '#333'}}>
						光照强度：<Text style={{fontSize: 26, color: successColor}}>3.4</Text>lx
					</Text>
				</View>
			</View>
			<View>
				<ButtonGroup
					buttons={['日', '月', '年']}
					selectedIndex={selectedIndex}
					onPress={value => {
						changeType(value)
					}}
				/>
			</View>
			<View>
				<SvgChart ref={svgRef}></SvgChart>
			</View>
		</ScrollView>
	)
}
